import React from 'react';
import './index.less';
import {connect} from "dva";
import BaseComponent from "components/Base/BaseComponent";
import Button from "components/Base/Button";
import {Descriptions} from "antd";
import Panel from "components/Base/Panel";
import OrderGoods from "./OrderGoods";
import ModalForm from "components/Base/Modal/ModalForm";
import RefundList from "../../RefundList/components";


@connect(({orderDetail, shipper, order}) => ({orderDetail, shipper, order}))
export default class extends BaseComponent {

  state = {
    visibleRenewShipInfo: false,
    visibleReturn: false,
    changing: false,
  };

  getNamespace() {
    return 'orderDetail';
  }

  componentDidMount() {
    this.refresh();
    this.dispatch({
      type: `shipper/getAll`,
    })
  }

  refresh = () => {
    const {orderId} = this.props.match.params;
    this.dispatch({
      type: `${this.getNamespace()}/getOrderInfo`,
      payload: {
        notice: this.showMsg,
        orderId
      },
    })
  }

  handleCancel = () => {
    this.setState({visibleRenewShipInfo: false, visibleReturn: false});
  }

  getShipColumns = () => {

    const formColumns = [
      {
        title: '物流公司',
        name: 'shippingName',
        formItem: {
          rules: [
            {
              required: true,
              message: '请选择物流公司'
            }
          ],

          showSearch: true,
          type: 'select',
          loading: this.getAll("shipper").loading,  // 加载状态
          onDropdownVisibleChange: (visible) => {
            if (visible) {
              console.log("onDropdownVisibleChange", visible);
              this.dispatch({
                type: `shipper/getAll`,
              })
            }
          },
        },
        dict: this.getAll("shipper").dict,
      },

      {
        title: '物流单号',
        name: 'shippingCode',
        formItem: {
          rules: [
            {
              required: true,
              message: '请输入物流单号'
            }
          ]
        },
      },

    ];

    return formColumns;
  }


  showChangeShip = () => {
    this.setState({visibleRenewShipInfo: true});
  }

  getReturnColumns = () => {

    const formColumns = [
      {
        title: '退款金额(元)',
        name: 'refundFee',
        formItem: {
          rules: [
            {
              required: true,
              message: '请输入退款金额'
            }
          ]
        },
      },

    ];

    return formColumns;
  }


  showReturn = () => {
    this.setState({visibleReturn: true});
  }

  formSubmit = (value) => {

    const {orderDetail, shipper, match} = this.props;
    const {orderId} = match.params;

    const {visibleRenewShipInfo, visibleReturn, changing} = this.state;

    if (visibleRenewShipInfo) {
      const {shippingName} = value;
      const {all} = this.props.shipper;
      let shipper;
      all.forEach(v => {
        if (v.name == shippingName || v.id == shippingName)
          shipper = v;
      });

      console.log("shippingName", shippingName);
      if (!!shipper) {
        console.log("formSubmit", "visibleRenewShipInfo:", visibleRenewShipInfo, shipper, all);
        value = {
          orderId, shippingName: shipper.name, shippingNameCode: shipper.code, shippingNameWebCode: shipper.webCode,
          shippingCode: value.shippingCode
        };
        this.setState({changing: true});
        this.dispatch({
          type: `order/send`,
          payload: {
            value,
            notice: this.showMsg,
            success: () => {
              this.handleCancel();
              this.refresh();
              this.setState({changing: false});
            },
            fail: () => {
              this.setState({changing: false});
            }
          }
        });
      }
    }

    if (visibleReturn) {

      const {refundFee} = value;
      value = {orderId, refundFee};
      this.setState({changing: true});
      this.dispatch({
        type: `${this.getNamespace()}/refund`,
        payload: {
          value,
          notice: this.showMsg,
          success: () => {
            this.handleCancel();
            this.refresh();
            this.setState({changing: false});
            this.state.refundList.refresh();
          },
          fail: () => {
            this.setState({changing: false});
          }
        }
      });
    }
  }

  render() {

    const {orderDetail, shipper, match} = this.props;
    const {all} = shipper;
    const {orderId} = match.params;
    const {userInfo, orderInfo, waitSend, waitRefund, goodItemsPage} = orderDetail;

    const {visibleRenewShipInfo, visibleReturn, changing} = this.state;

    const {name, mobile, gender, province, city, memberLevel} = userInfo;
    const {payment, paymentType, postFee, orderStatus, nickName, sellerName} = orderInfo;
    const {createTime, paymentTime, consignTime, endTime, closeTime, expireTime} = orderInfo;
    const {outTradeNo, payTime, totalFee, transactionId, tradeState, payType, tradeType} = orderInfo.payLog;
    const {
      shippingName, shippingNameWebCode, shippingCode, receiver, receiverMobile, receiverZipCode, receiverAreaName,
      returnName, returnCode, returnNameCode, returnNameWebCode
    } = orderInfo.orderLogistics;

    const sendLogisticsUrl = "https://www.kuaidi100.com/chaxun?com=" + shippingNameWebCode + "&nu=" + shippingCode;
    const returnLogisticsUrl = "https://www.kuaidi100.com/chaxun?com=" + returnNameWebCode + "&nu=" + returnCode;

    const modalFormProps = {
      loading: changing,
      record: {shippingName, shippingCode},
      visible: visibleRenewShipInfo || visibleReturn,
      columns: visibleRenewShipInfo ? this.getShipColumns() : this.getReturnColumns(),
      modalOpts: {
        width: 700
      },
      onCancel: this.handleCancel,
      onSubmit: value => {
        this.formSubmit(value);
      },
      ref: (form) => {
        this.form = form;
      },
    };

    return (

      <div className="data-detail">

        <Button className='return' type="primary" onClick={() => {
          // this.jump("/order")
          this.goBack();
        }}>
          返回
        </Button>

        <Panel title={`用户信息`} onRefresh={() => {
        }}>
          <Descriptions bordered>
            <Descriptions.Item label="名字">{name}</Descriptions.Item>
            <Descriptions.Item label="手机">{mobile}</Descriptions.Item>
            <Descriptions.Item label="昵称">{nickName}</Descriptions.Item>
            <Descriptions.Item label="省">{province}</Descriptions.Item>
            <Descriptions.Item label="城市">{city}</Descriptions.Item>
            <Descriptions.Item label="会员等级">{memberLevel}</Descriptions.Item>
          </Descriptions>
        </Panel>

        <Panel title={`订单信息`} onRefresh={() => {
        }}>
          <Descriptions bordered>
            <Descriptions.Item label="订单id">{orderId}</Descriptions.Item>
            <Descriptions.Item label="实付金额">{payment}</Descriptions.Item>
            <Descriptions.Item label="支付类型">{paymentType}</Descriptions.Item>
            <Descriptions.Item label="订单状态">{orderStatus}</Descriptions.Item>
            <Descriptions.Item label="用户昵称">{nickName}</Descriptions.Item>
            <Descriptions.Item label="商家名字">{sellerName}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{createTime}</Descriptions.Item>
            <Descriptions.Item label="付款时间">{paymentTime}</Descriptions.Item>
            <Descriptions.Item label="发货时间">{consignTime}</Descriptions.Item>
            <Descriptions.Item label="交易完成时间">{endTime}</Descriptions.Item>
            <Descriptions.Item label="交易关闭时间">{closeTime}</Descriptions.Item>
            <Descriptions.Item label="订单失效时间">{expireTime}</Descriptions.Item>
          </Descriptions>
        </Panel>

        <Panel title="商品列表" onRefresh={() => {
        }}>
          <OrderGoods pageData={goodItemsPage}/>
        </Panel>

        <Panel title={`配送信息`} onRefresh={() => {
        }}>
          <Descriptions bordered>
            <Descriptions.Item label="物流名称">{shippingName}</Descriptions.Item>
            <Descriptions.Item label="物流单号">{<a href={sendLogisticsUrl} target="_blank">{shippingCode}</a>}</Descriptions.Item>
            <Descriptions.Item label="邮费">{postFee}</Descriptions.Item>
            <Descriptions.Item label="收货人">{receiver}</Descriptions.Item>
            <Descriptions.Item label="收货人手机">{receiverMobile}</Descriptions.Item>
            <Descriptions.Item label="收货人邮编">{receiverZipCode}</Descriptions.Item>
            <Descriptions.Item label="收货人地区名称">{receiverAreaName}</Descriptions.Item>
          </Descriptions>
          {
            <div className="manager">
              <Button type="primary" onClick={this.showChangeShip}>更新物流单号</Button>
            </div>
          }
        </Panel>

        <Panel title={`支付信息`} onRefresh={() => {
        }}>
          <Descriptions bordered>
            <Descriptions.Item label="支付订单号">{outTradeNo}</Descriptions.Item>
            <Descriptions.Item label="支付完成时间">{payTime}</Descriptions.Item>
            <Descriptions.Item label="支付金额">{totalFee}</Descriptions.Item>
            <Descriptions.Item label="第三方交易号">{transactionId}</Descriptions.Item>
            <Descriptions.Item label="交易状态">{tradeState}</Descriptions.Item>
            <Descriptions.Item label="支付类型">{payType}</Descriptions.Item>
            <Descriptions.Item label="交易类型">{tradeType}</Descriptions.Item>
          </Descriptions>
        </Panel>

        {waitRefund ?
          <Panel title={`退款管理`} onRefresh={() => {
          }}>
            <Panel title={`退款货物物流信息`} onRefresh={() => {
            }}>
              <Descriptions bordered size="small">
                <Descriptions.Item label="退款货物物流名称">{returnName}</Descriptions.Item>
                <Descriptions.Item label="退款货物物流单号">{<a href={returnLogisticsUrl} target="_blank">{returnCode}</a>}</Descriptions.Item>
              </Descriptions>
            </Panel>

            <Panel title={`退款记录`} onRefresh={() => {
            }}>
              {
                <div className="manager">
                  <Button type="primary" onClick={this.showReturn}>新增退款</Button>
                </div>
              }
              <RefundList outTradeNo={outTradeNo} onRef={(refundList) => {
                this.setState({refundList});
              }}/>
            </Panel>
          </Panel> : <div/>
        }

        <ModalForm {...modalFormProps} />


      </div>
    );
  }

}
